<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智驭安行 - 智慧交通安全监测系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="img/logo.png" alt="智驭安行">
                <span>智驭安行</span>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="travel-service.html">出行服务</a></li>
                    <li><a href="vehicle-info.html">车辆信息</a></li>
                    <li><a href="tech-support.html">学习与技术支持</a></li>
                    <li><a href="customer-service.html">客户服务</a></li>
                    <li><a href="data.html">数据</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <div class="hero">
        <div class="container">
            <h1>智能交通安全监测系统</h1>
            <p>实时监测公共交通工具上司机和乘客的异常行为，提升城市交通安全</p>
            <div class="location">
                <i class="fas fa-map-marker-alt"></i>
                <span>北京市</span>
            </div>
        </div>
    </div>
    
    <div class="main-content">
        <div class="container">
            <div class="services-section">
                <h2>出行服务</h2>
                
                <div class="transport-tools">
                    <h3>交通工具</h3>
                    <div class="transport-grid">
                        <div class="transport-item" data-type="bus">
                            <div class="icon">
                                <i class="fas fa-bus"></i>
                            </div>
                            <div class="text">公交车</div>
                        </div>
                        <div class="transport-item" data-type="subway">
                            <div class="icon">
                                <i class="fas fa-subway"></i>
                            </div>
                            <div class="text">地铁</div>
                        </div>
                        <div class="transport-item" data-type="train">
                            <div class="icon">
                                <i class="fas fa-train"></i>
                            </div>
                            <div class="text">高铁</div>
                        </div>
                        <div class="transport-item" data-type="railway">
                            <div class="icon">
                                <i class="fas fa-train"></i>
                            </div>
                            <div class="text">火车</div>
                        </div>
                    </div>
                </div>
                
                <div class="info-query">
                    <h3>信息查询</h3>
                    <div class="query-grid">
                        <div class="query-item" data-type="realtime">
                            <div class="icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="text">实时公交</div>
                            <div class="desc">点击查看</div>
                        </div>
                        <div class="query-item" data-type="route">
                            <div class="icon">
                                <i class="fas fa-search"></i>
                            </div>
                            <div class="text">查询公交</div>
                            <div class="desc">点击查看</div>
                        </div>
                        <div class="query-item" data-type="subway">
                            <div class="icon">
                                <i class="fas fa-map"></i>
                            </div>
                            <div class="text">地铁线路</div>
                            <div class="desc">点击查看</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="monitoring-map">
                <h2>北京市轨道交通线网图</h2>
                <div class="map-container">
                    <div class="map-controls">
                        <button class="zoom-in"><i class="fas fa-plus"></i></button>
                        <button class="zoom-out"><i class="fas fa-minus"></i></button>
                        <button class="reset"><i class="fas fa-redo"></i></button>
                    </div>
                    <div class="map-image">
                        <img src="img/beijing-subway-map.jpg" alt="北京市轨道交通线网图">
                    </div>
                    <div class="map-legend">
                        <div class="legend-title">图例</div>
                        <div class="legend-items">
                            <div class="legend-item">
                                <div class="color" style="background-color: #E40077;"></div>
                                <div class="text">1号线</div>
                            </div>
                            <div class="legend-item">
                                <div class="color" style="background-color: #0070BD;"></div>
                                <div class="text">2号线</div>
                            </div>
                            <div class="legend-item">
                                <div class="color" style="background-color: #F9E701;"></div>
                                <div class="text">4号线</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="monitoring-dashboard">
                <h2>异常行为监测概览</h2>
                <div class="dashboard-grid">
                    <div class="dashboard-card">
                        <div class="card-header">
                            <h3>今日监测统计</h3>
                            <div class="card-actions">
                                <button class="refresh-btn"><i class="fas fa-sync-alt"></i></button>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="metrics">
                                <div class="metric">
                                    <div class="metric-value">1,245</div>
                                    <div class="metric-label">监测车辆</div>
                                </div>
                                <div class="metric">
                                    <div class="metric-value">87</div>
                                    <div class="metric-label">异常行为</div>
                                </div>
                                <div class="metric">
                                    <div class="metric-value">42</div>
                                    <div class="metric-label">司机异常</div>
                                </div>
                                <div class="metric">
                                    <div class="metric-value">45</div>
                                    <div class="metric-label">乘客异常</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dashboard-card">
                        <div class="card-header">
                            <h3>实时告警</h3>
                            <div class="card-actions">
                                <button class="view-all-btn">查看全部</button>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="alerts">
                                <div class="alert">
                                    <div class="alert-icon warning">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                    <div class="alert-content">
                                        <div class="alert-title">检测到1号公交车司机疲劳驾驶行为</div>
                                        <div class="alert-time">10分钟前</div>
                                    </div>
                                </div>
                                <div class="alert">
                                    <div class="alert-icon danger">
                                        <i class="fas fa-exclamation-circle"></i>
                                    </div>
                                    <div class="alert-content">
                                        <div class="alert-title">5号地铁车厢内检测到可疑物品</div>
                                        <div class="alert-time">25分钟前</div>
                                    </div>
                                </div>
                                <div class="alert">
                                    <div class="alert-icon warning">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                    <div class="alert-content">
                                        <div class="alert-title">3号公交车乘客区域检测到异常行为</div>
                                        <div class="alert-time">40分钟前</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="img/logo.png" alt="智驭安行">
                    <span>智驭安行</span>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h3>关于我们</h3>
                        <ul>
                            <li><a href="#">公司简介</a></li>
                            <li><a href="#">联系方式</a></li>
                            <li><a href="#">加入我们</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h3>服务支持</h3>
                        <ul>
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">常见问题</a></li>
                            <li><a href="#">技术支持</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h3>法律信息</h3>
                        <ul>
                            <li><a href="#">隐私政策</a></li>
                            <li><a href="#">使用条款</a></li>
                            <li><a href="#">版权声明</a></li>
                        </ul>
                    </div>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-phone"></i> 400-123-4567</p>
                    <p><i class="fas fa-envelope"></i> contact@zhiyuanxing.com</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 智驭安行 版权所有</p>
            </div>
        </div>
    </footer>
    
    <script src="js/main.js"></script>
</body>
</html>
